<template>
  <div class="text">
    <template v-if="formData.advancedConfig?.urlList.length">
      <template v-if="formData.advancedConfig.swiper">
        <!-- 滚动 -->
        <template v-if="formData.advancedConfig?.scrollType == '1'">
          <div :class="scrollClassName" :style="styleOption">
            <div
              class="scroll-text"
              :style="{
                animationName: formData.advancedConfig.scrollDirection,
                animationDuration: `${formData.advancedConfig.scrollSpeed}s`,
                display: 'flex',
                ...styleOption,
              }"
            >
              {{ formData.advancedConfig.urlList[0].url }}
            </div>
          </div>
        </template>
        <!-- 翻页 -->
        <template v-if="formData.advancedConfig?.scrollType == '2'">
          <div class="text-page">
            <div
              :class="{
                'text-page-list': true,
                [formData.advancedConfig.scrollDirection]:
                  currentIndex === index,
              }"
              :style="styleOption"
              v-for="(item, index) in formData.advancedConfig.urlList"
              :key="index"
            >
              {{ item.url }}
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="text-content" :style="styleOption">
          {{ formData.advancedConfig.urlList[0].url }}
        </div>
      </template>
    </template>
    <template v-else>
      <div class="text-content" :style="styleOption">
        {{ formData.name }}
      </div>
    </template>
  </div>
</template>
<script setup>
import { watch } from 'vue'

let props = defineProps({
  formData: {
    type: Object,
    default: () => {},
  },
})

let { formData } = toRefs(props)
let styleOption = ref({})
let currentIndex = ref(0)
let timer = null
let scrollClassName = computed(() => {
  let direction = formData.value.advancedConfig.scrollDirection
  if (direction === 'scrollRight' || direction === 'scrollLeft') {
    return ['text-content', 'scroll-container']
  } else {
    return ['text-content', 'scroll-containerTop']
  }
})

watch(
  () => formData.value.advancedConfig,
  (newVal) => {
    if (newVal) {
      styleOption.value = {
        backgroundColor: newVal.backgroundColor,
        color: newVal.color,
        alignItems: newVal.alignItems,
        justifyContent: newVal.justifyContent,
        fontSize: newVal.fontSize + 'px',
      }
      // 翻页
      if (newVal.scrollType == 2) {
        if (timer) {
          clearInterval(timer)
        }
        timer = setInterval(() => {
          nextPage()
        }, newVal.scrollSpeed * 1000)
      } else {
        if (timer) {
          clearInterval(timer)
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  },
)
function nextPage() {
  if (currentIndex.value < formData.value.advancedConfig.urlList.length - 1) {
    currentIndex.value++
  } else {
    currentIndex.value = 0 // 循环回到第一页
  }
}
</script>
<style scoped>
.text {
  width: 100%;
  height: 100%;
}
.text-content {
  height: 100%;
  overflow: hidden;
  display: flex;
}
.text-page {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: relative;
  perspective: 1000px;
  background: rgba(255, 255, 255, 1);
}
.text-page-list {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: rotateY(0deg);
  display: flex;
}
.scroll-container {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.scroll-containerTop {
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  flex-wrap: wrap;
}
.scroll-text {
  display: inline-block;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  min-height: 100%;
  min-width: 100%;
}
.text-page-list.scrollRight {
  transform: rotateY(180deg);
}
.text-page-list.scrollLeft {
  transform: rotateY(-180deg);
}
.text-page-list.scrollTop {
  transform: rotateX(-180deg);
}
.text-page-list.scrollBottom {
  transform: rotateX(180deg);
}
</style>
